<template>
  <div id="disscuss-info">
    <div style="margin-left: 100px">
      <img :src="require(`@/assets/${discussinfo.userHead}`)" style="width: 80px;border-radius: 100%;float: left">
      <div style="margin-left: 100px;margin-right: 100px">
        <p>
          <span style="color:#7a9e31;">{{ discussinfo.userName }}&nbsp;</span>
          <span style="font-size: 10px">{{ discussinfo.gmtCreate }}</span>
        </p>
        <h3>{{ discussinfo.courseTalkTitle }}</h3>
        <p>内容:{{discussinfo.courseTalkContent}}</p>
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="textarea1">
        </el-input>
        <el-button type="success" plain @click="toreply()" style="margin-top: 10px">回复</el-button>
      </div>
    </div>
    <div style="margin-top: 20px;border-top: 1px solid #d6d6d6">
      <ul style="list-style: none;width: 100%">
        <li v-for="(discuss,index) in discusses" style="padding-bottom: 20px;margin-left:80px ">
          <img :src="require(`@/assets/${discuss.userHead}`)" style="width: 50px;border-radius: 100%;float: left;margin-left: 30px">
          <div style="margin-left: 100px">
            <p>
              <span style="color:#7a9e31;">{{ discuss.userName }}&nbsp;</span>
              <span style="font-size: 10px">{{ discuss.gmtCreate }}</span>
            </p>
            <p>{{ discuss.courseTalkContent }}</p>
            <el-button type="success" plain @click="addgreat(index)">赞({{ discuss.great }})</el-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DiscussInfo",
  data() {
    return {
      discussinfo: {
        courseTalkTitle: localStorage.getItem('DcourseTalkTitle'),
        courseTalkNumber: localStorage.getItem('DcourseTalkNumber'),
        userName: localStorage.getItem('DuserName'),
        gmtCreate: localStorage.getItem('DgmtCreate'),
        great: localStorage.getItem('Dgreat'),
        userHead: localStorage.getItem('DuserHead'),
        courseTalkContent:localStorage.getItem('DcourseTalkContent')
      },
      discusses: [],
      textarea1:''
    }
  },
  methods:{
    addgreat(index){
      this.discusses[index].great++;
      this.courseTalkId=this.discusses[index].courseTalkId
      this.great=this.discusses[index].great
      axios('/course/savegreat', {
        params: {
          courseTalkId: this.courseTalkId,
          great:this.great
        },
        method: 'post'
      }).then(res => {
        console.log(res.data)
      }).catch(function (error) {
        console.log(error);
      });
    },
    toreply(){
      axios('/course/replytalk', {
        params: {
          courseTalkNumber: localStorage.getItem('DcourseTalkNumber'),
          courseId:localStorage.getItem('courseIndex'),
          courseTalkContent:this.textarea1,
          userId:localStorage.getItem('userId')
        },
        method: 'post'
      }).then(res => {
        location.reload()
      }).catch(function (error) {
        console.log(error);
      });
    }
  },
  mounted() {
    axios('/course/reply', {
      params: {
        courseTalkNumber: localStorage.getItem('DcourseTalkNumber')
      },
      method: 'get'
    }).then(res => {
      console.log(res.data)
      this.discusses = res.data.data
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>
#disscuss-info{
  border: 1px solid #d6d6d6;
  margin-left: 200px;
  margin-right: 200px;
}
</style>
